<template>
  <div>
    <div v-bind:class="{ active:isActive }" id="app1">我是组件1</div>
    <template v-if="loginType === 'username'">
      <label>用户名</label>
      <input type="text" placeholder="请输入用户名"/>
    </template>
    <ul id="app-for">
      <li v-for="item in items">
        <span>{{item.message}}</span>
        <span>{{item.name}}</span>
      </li>
    </ul>
    <div id="todo-list-example">
      <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
      <ul>
        <li is="todo-item" v-for="(todo, index) in todos" v-bind:title="todo" 
        v-on:remove="todos.splice(index, 1)"></li>
      </ul>
    </div>
    <router-link :to="`/demo`">我是demo2</router-link>
    <div id="app1">
      <button v-on:click="counter+= 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    <div id="app1">
      <button v-on:click="greet">greet</button>
      <button v-on:click="warn('form cannot be submitted yet.', $event)">submit</button>
    </div>
    <input type="checkbox" id="jack" value="Jacker" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="Johner" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Miker" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>select: {{ selected }}</span>
    <Hello :haha="name"/>
    <div v-html="rawHtml"></div>
  </div>
</template>
<script>
import Hello from '@/components/Hello'
export default {
  data () {
    return {
      isActive: true,
      items: [
        {
          message: '12',
          name: 'hw',
          age: 12
        },
        {
          message: '123',
          name: 'we'
        }
      ],
      name: 'baiduhuhu',
      counter: 0,
      checkedNames: [],
      selected: 'c',
      options: [
        {
          text: 'one',
          value: 'a'
        },
        {
          text: 'two',
          value: 'b'
        }
      ],
      rawHtml: 'kakakk'
    }
  },
  components: {
    Hello
  },
  methods: {
    greet: function (event) {
      alert('hello' + this.name)
    },
    warn: function (message, event) {
      if (event) event.preventDefault()
      alert(message)
    }
  }
}
</script>
